このファイル: /home/web6047/www/cgi-bin/prj/20180707-SVC（Side View Character）/techtree/[C] anim/canvas - 応用 - snap 20180715.html
1
<!DOCTYPE html>
2
<head>
3
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
4
<title>UntitledHomepage6047Canvas</title>
5
<script>
6
7
console.clear();
8
console.log( "=============== script ==============" );
9
function $( id ) { return document.getElementById( id ); }
10
var HereDocument = /\/\*\s*([^]*?)\s*\*\//;
11
12
13
14
var cc;
15
16
function onloadx() {
17
18
19
div = document.createElement( "div" );
20
document.body.appendChild( div );
21
with( div.style ) {
22
position = "absolute";
23
backgroundColor = "red";
24
width = height = "64px";
25
top = 100 + "px";
26
}
27
rect = div.getBoundingClientRect();
28
29
30
31
anims = new Array();
32
33
anims.push( {
34
comment : "四角形を回転しつつ右に動かす",
35
v : rect.left,
36
vEnd : rect.left + 100,
37
run : function() {
38
this.v++;
39
div.style.left = this.v * 3 + "px";
40
div.style.transform = "rotate(" + this.v * 30 + "deg)";
41
return this.v <= this.vEnd;
42
},
43
} );
44
45
anims.push( {
46
comment : "四角形を縦に動かす",
47
v : -50,
48
vEnd : 50,
49
object : div.style,
50
member : "top",
51
run : function() {
52
this.v++;
53
this.object[ this.member ] = rect.top + this.v * this.v * 0.1 + "px";
54
return this.v <= this.vEnd;
55
},
56
} );
57
58
anims.push( {
59
comment : "四角形の色",
60
v : 0,
61
vEnd : 255,
62
anim0 : anims[ 1 ],
63
run : function() {
64
this.v = 255 - Math.abs( ( 255 / 50 ) * this.anim0.v );
65
div.style.backgroundColor = "RGB(" + 255 + "," + this.v + "," + this.v + ")";
66
return this.anim0.v <= this.anim0.vEnd;
67
},
68
} );
69
70
timerID = setInterval( run, 50 );
71
}
72
function run() {
73
for( var i = 0; i < anims.length; i++ ) {
74
var anm = anims[ i ];
75
if( ! anm.run() ) {
76
console.log( "end" );
77
anims.splice( i--, 1 );
78
continue;
79
}
80
}
81
}
82
function draw() {
83
canvas.beginPath();
84
canvas.arc( screenW / 2, screenH / 2, 100, 0, 6.28, false );
85
canvas.closePath();
86
canvas.stroke();
87
}
88
</script>
89
<style>
90
</style>
91
</head>
92
<body onload="onloadx();" style="
93
background-color : lightgray;
94
">
95
</body>
96
</html>